<template>
  <div class="line_chart">
    <div class="just">
      <div class="t_s">

        <div class="sologan v_center">
          <svg-icon class-name="small_icon v_center" icon-class="increase" /> 加盟车增长趋势</div>
        <van-tabs v-model="type" @change="getType" type="card">
          <van-tab title="日" name="day"></van-tab>
          <van-tab title="周" name="week"></van-tab>
          <van-tab title="月" name="month"></van-tab>
        </van-tabs>
      </div>
      <canvas width="300" height="250" id="mountNode"></canvas>
    </div>
  </div>

</template>

<script>
  const F2 = require("@antv/f2/dist/f2-all.min.js");
  // require("@antv/f2/lib/interaction/pan");
  const ScrollBar = require("@antv/f2/lib/plugin/scroll-bar")
  let _ = require('lodash')
  import {
    Pan
  } from '@antv/f2/lib/interaction';
  import {
    HomeService
  } from "@/api"
  export default {
    name: 'lineChart',
    data() {
      return {
        data2: [{
          year: '1951 年',
          sales: 60
        }, {
          year: '1952 年',
          sales: 52
        }, {
          year: '1956 年',
          sales: 61
        }, {
          year: '1957 年',
          sales: 145
        }, {
          year: '1958 年',
          sales: 48
        }, {
          year: '1959 年',
          sales: 38
        }, {
          year: '1960 年',
          sales: 38
        }, {
          year: '1962 年',
          sales: 38
        }],
        type: 'day',
        data: [{
            label: 'Mon.',
            type: '本日',
            value: 2800
          },
          //  {
          //   label: 'Mon.',
          //   type: '昨日',
          //   value: 2260
          // },
          {
            label: 'Tue.',
            type: '本日',
            value: 1800
          },
          //  {
          //   label: 'Tue.',
          //   type: '昨日',
          //   value: 1300
          // },
          {
            label: 'Wed.',
            type: '本日',
            value: 950
          },
          //  {
          //   label: 'Wed.',
          //   type: '昨日',
          //   value: 900
          // },
          {
            label: 'Thu.',
            type: '本日',
            value: 500
          },
          //  {
          //   label: 'Thu.',
          //   type: '昨日',
          //   value: 390
          // }, 
          {
            label: 'Fri.',
            type: '本日',
            value: 170
          },
          // {
          //   label: 'Fri.',
          //   type: '昨日',
          //   value: 100
          // },
          {
            label: 'Fri.1',
            type: '本日',
            value: 170
          },
          //  {
          //   label: 'Fri.1',
          //   type: '昨日',
          //   value: 100
          // },
          {
            label: 'Fri.2',
            type: '本日',
            value: 170
          },
          //  {
          //   label: 'Fri.2',
          //   type: '昨日',
          //   value: 100
          // }, {
          //   label: 'Fri.3',
          //   type: '本日',
          //   value: 170
          // }, {
          //   label: 'Fri.3',
          //   type: '昨日',
          //   value: 100
          // }, {
          //   label: 'Fri.4',
          //   type: '本日',
          //   value: 170
          // }, {
          //   label: 'Fri.4',
          //   type: '昨日',
          //   value: 100
          // }, {
          //   label: 'Fri.5',
          //   type: '本日',
          //   value: 170
          // }, {
          //   label: 'Fri.5',
          //   type: '昨日',
          //   value: 100
          // }, {
          //   label: 'Fri.6',
          //   type: '本日',
          //   value: 170
          // }, {
          //   label: 'Fri.6',
          //   type: '昨日',
          //   value: 100
          // }, {
          //   label: 'Fri.7',
          //   type: '本日',
          //   value: 170
          // }, {
          //   label: 'Fri.7',
          //   type: '昨日',
          //   value: 100
          // }, {
          //   label: 'Fri.8',
          //   type: '本日',
          //   value: 170
          // }, {
          //   label: 'Fri.8',
          //   type: '昨日',
          //   value: 100
          // }, {
          //   label: 'Fri.9',
          //   type: '本日',
          //   value: 170
          // }, {
          //   label: 'Fri.9',
          //   type: '昨日',
          //   value: 100
          // }, {
          //   label: 'Fri.14',
          //   type: '本日',
          //   value: 170
          // }, {
          //   label: 'Fri.14',
          //   type: '昨日',
          //   value: 100
          // }, {
          //   label: 'Fri.15',
          //   type: '本日',
          //   value: 170
          // }, {
          //   label: 'Fri.15',
          //   type: '昨日',
          //   value: 100
          // }, {
          //   label: 'Fri.16',
          //   type: '本日',
          //   value: 170
          // }, {
          //   label: 'Fri.16',
          //   type: '昨日',
          //   value: 100
          // }
        ]
      }
    },
    methods: {
      getType() {
        this.handle_data();
      },
      handle_data() {
        HomeService.getTrend({
          type: this.type
        }).then(res => {
          console.log('trend', res)
          this.data = res.data.map(item=>{
            item.type = this.type
            item.value = Number(item.value)
            return item;
          }); 
          console.log(this.data);
          this.init();
        })
      },
     
      init() {

        F2.Chart.registerInteraction('pan', Pan);
        var chart = new F2.Chart({
          id: 'mountNode',
          pixelRatio: window.devicePixelRatio,
          plugins: ScrollBar
        });
        chart.source(this.data, {
          value: {
            // tickInterval: this.type == 'day' ? 10 : this.type == 'week' ? 50 : 100
            tickInterval: 75
          },
        });
        chart.tooltip({
          custom: true, // 自定义 tooltip 内容框
          onChange: function onChange(obj) {
            var legend = chart.get('legendController').legends.top[0];
            var tooltipItems = obj.items;
            var legendItems = legend.items;
            var map = {};
            legendItems.map(function (item) {
              map[item.name] = _.clone(item);
            });
            tooltipItems.map(function (item) {
              var name = item.name;
              var value = item.value;
              if (map[name]) {
                map[name].value = value;
              }
            });
            legend.setItems(_.values(map));
          },
          onHide: function onHide() {
            var legend = chart.get('legendController').legends.top[0];
            legend.setItems(chart.getLegendItems().country);
          }
        });
        chart.axis('label', {
          line: F2.Global._defaultAxis.line,
          grid: null,
        });
        chart.axis('value', {
          line: null,
          grid: F2.Global._defaultAxis.grid,
          label: function label(text, index, total) {
            var textCfg = {};
            if (index === 0) {
              textCfg.textAlign = 'left';
            } else if (index === total - 1) {
              textCfg.textAlign = 'right';
            }
            return textCfg;
          }
        });
        // chart.coord({
        //   transposed: true
        // });
        let val = this.data.slice(0, 5).map(val => val['label'])
        chart.scale('label', {
          type: 'cat',
          values: val,
          ticks: this.data.map(val => val['label'])
        });


        chart.scrollBar({
          mode: 'x',
          xStyle: {
            backgroundColor: '#e8e8e8',
            fillerColor: '#808080',
            offsetY: -2
          }
        })
        chart.interaction("pan")
        chart.interval().position('label*value').color('type', ['rgba(243, 149, 27, 1)', 'rgba(236, 104, 21, 1)'])
          .adjust({
            type: 'dodge',
            marginRatio: 1 / 32
          });
        chart.render();
      }
    },
    mounted() {
      this.handle_data();
    },
  }
</script>

<style lang="less" scoped>
  .line_chart {
    margin-top: 32px;
    width: 701.99px;
    height: 738px;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 16px;
  }

  .just {
    display: flex;
    flex-direction: column;
    align-items: center;

    .t_s {
      width: 100%;
      padding: 32px 24px;
      display: flex;

      .sologan {
        .small_icon {
          width: 30px;
          height: 29px;
          margin-right: 8px;
          line-height: 1;
        }

        flex: 1;
        color: rgba(51, 51, 51, 1);
        font-size: 24px;
        line-height: 1;

      }

      /deep/.van-tabs__wrap {
        height: auto;
        background-color: rgba(243, 245, 247, 1);
        border-radius: 16px;
      }

      /deep/.van-tabs__nav--card {
        height: auto;
        border: none;
        background-color: rgba(243, 245, 247, 1);
      }

      /deep/.van-tab {
        width: 80px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(102, 102, 102, 1);
        margin: 8px;
        background-color: #fff;
        border-radius: 8px;
        border: none;
      }

      /deep/.van-tab.van-tab--active {
        background-color: rgba(243, 149, 27, 1);
        color: #ffffff;
      }




    }

  }
</style>